<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../../assets/libs/jquery/jquery-3.6.1.min.js"></script>
</head>

<body>
  <button id="slideDown">slideDown</button>
  <button id="slideUp">slideUp</button>
  <button id="slideToggle">slideToggle</button>
  <div>
    <img src="../../../assets/images/Cheems.jpg">
  </div>

  <script>
    function slideDown() {
      $('div').stop().slideDown(1000)
    }

    function slideUp() {
      $('div').stop().slideUp(1000)
    }

    function slideToggle() {
      $('div').stop().slideToggle(1000)
    }

    $('#slideDown').click(slideDown)
    $('#slideUp').click(slideUp)
    $('#slideToggle').click(slideToggle)
  </script>
</body>

</html>